<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Pagebox</title>
    <script type="text/javascript" src="/Utilities/webdesk/webdesk.ui.core.js"></script>
    <style type="text/css">
        body {
            padding: 20px;
            font-size: 14px;
        }

        .footer {
            position: absolute;
            bottom: 0px;
            left: 0px;
            height: 60px;
            width: 100%;
            background-color: #e2e2e2;
        }

        .footer label {
            font-size: 14px;
            height: 30px;
            line-height: 30px;
            display: block;
            float: left;
            user-select: none;
        }

        .footer #radio {
            height: 30px;
            margin-top: -30px;
        }

        .footer div#check label {
            width: 25%;
        }
    </style>

</head>

<body oncontextmenu='self.event.returnValue=false'>
    <button type="button" id="openbox">创建子窗体</button><span id='pid'></span>
    <div>来自子窗体的输入：<span id="show" style="color: red;"></span></div>

    <div style="margin-top: 40px">
        在这里输入，将在父窗体显示
        <input type="text" name="fname" id="toparent" />
    </div>
    <div class="skins"></div>
    <div class="footer">
        <div id="radio"> <label>
                <input type="radio" name="rg" checked="checked" value="self" id="rdself" />
                操作当前窗体</label>

            <label>
                <input type="radio" name="rg" value="parent" id="rdparent" />
                操作父级窗体</label></div>
        <div id="check">
            <label><input name="min" type="checkbox" value="" />禁用最小化</label>
            <label><input name="max" type="checkbox" value="" />禁用最大化</label>
            <label><input name="close" type="checkbox" value="" />禁用关闭</label>
            <label><input name="fresh" type="checkbox" value="" />禁用刷新</label>
            <label><input name="move" type="checkbox" value="" />禁止移动</label>
            <label><input name="resize" type="checkbox" value="" />禁止缩放</label>
            <label><input name="full" type="checkbox" value="" />最大化窗体</label>
            <label><input name="mini" type="checkbox" value="" />最小化窗体</label></div>
    </div>
</body>
<script>


    var btn = $dom('#openbox');
    btn.click(function () {
        console.log(window.name);
        //直接创建
        var box = window.top.$pagebox.create({
            width: 400,
            height: 300,
            resize: true,
            pid: window.name,
            url: '../ctrls/pagebox-child.html'
        });
        box.title = 'id:' + box.id;
        /*
        box.onfocus(function(sender,e){
             console.log('当前焦点窗体：'+sender.title);
        });*/
        box.open();
        $dom('#pid').html('child-id:' + box.id);

    });
    //输入框,输入内容将显示的父窗体
    $dom('input#toparent').bind('input', function () {
        var v = $dom(this).val();
        //执行来源窗体的方法
        window.top.$pagebox.source.box(window.name, 'getChildInput("' + v + '")');

    });
    //接收来自子窗体的录入
    function getChildInput(txt) {
        $dom('#show').text(txt);
    }

    //更改窗体样式
    $dom('.footer #check input[type=checkbox]').click(function (e) {
        //要操作的窗体对象
        var box = $dom('#rdself').val() ? window.top.$ctrls.get(window.name).obj :
            window.top.$pagebox.parent(window.name);
        if (!box) {
            alert('没有父窗体，请先创建子窗体，并在子窗体中操作');
            return;
        }
        var input = $dom(this);
        //复选框name，作为操作的行为
        var action = input.attr('name');
        if (action == 'full') {
            box.full = input.val();
            return;
        }
        if (action == 'mini') {
            box.mini = input.val();
            return;
        }
        eval('box.' + action + '=!input.val();');
    });
</script>

</html>